/*
 *@description:常用地址
 *@Author:@rennan
 *@Date:2024-01-05 14:54:14
 *@version: V1.0.0
*/
<template>
  <div class="address_box">
    <van-nav-bar title="常用地址" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div>
      <van-address-list v-model="chosenAddressId" :list="list" :disabled-list="disabledList" disabled-text="以下地址超出配送范围"
        default-tag-text="默认" @add="onAdd" @edit="onEdit" />
    </div>

    <!-- 新增地址弹出框 -->
    <van-action-sheet v-model="show" title="新增地址">
      <div class="content">
        <van-address-edit :area-list="areaList" show-postal show-delete show-set-default show-search-result
          :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
          @delete="onDelete" @change-detail="onChangeDetail" />
      </div>
    </van-action-sheet>

  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      show: false,
      areaList: {},
      searchResult: [],
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
        },
      ],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
        },
      ],
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onAdd() {
      Toast('新增地址');
      this.show = true;
    },
    onEdit(item, index) {
      Toast('编辑地址:' + index);
    },
    onSave() {
      Toast('save');
      //发送请求，保存常用地址
    },
    onDelete() {
      Toast('delete');
      //发送请求 删除某个地址
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
}
</script>
<style scoped>
.van-address-list__bottom{
  position:absolute;
  bottom: 7%;
}

.van-button {
  background: linear-gradient(90deg, #7579ff, #bf73ff);
  border: none;
  margin-top: 5px;
}
</style>